<template>
    <view>
		<!-- 自定义搜索组件 -->
		<view class="search-box">
			<my-search @handlesearch="handlesearch"></my-search>
		</view>
		<!-- //轮播图 -->
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="true">
                        <swiper-item v-for="(item,index) in swiperList" :key="item.goods_id">
                            <navigator class="swiper-item uni-bg-red" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
								<image :src="item.image_src" class="swiper-item-img"></image>
							</navigator>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
		<!-- //导航栏 -->
		<view class="nav-list">
			<view class="nav-list-item" v-for="(item,index) in navList" :key="index">
				<image :src="item.image_src" @click="gocatepage(item.name)"></image>
			</view>
		</view>
		<!-- //楼层 -->
		<view class="floor-list">
			<view class="floor-list-item" v-for="(item,index) in floorList" :key = "index">
				<view class="floor-desc">
					<image :src="item.floor_title.image_src" class="titleimg"></image>
					<!-- 楼层的图片区 -->
					<view class="floor-img-box">
						<!-- 左侧大图片 -->
						<navigator class="left-img" :url="item.product_list[0].url">
							<image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width+'rpx'}" mode="widthFix"></image>
						</navigator>
						<!-- 右侧4个小图片 -->
						<view class="right-img">
							<navigator class="right-img-item" v-for="(item1,index1) in item.product_list" :key = "index1" :url="item1.url">
								<image :src="item1.image_src" mode="" v-if="index1!==0" :style="{width:item1.image_width+'rpx'}" mode="widthFix"></image>
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
	import mySearch from '../../components/my-search/my-search.vue'
	import badge from '@/mixins/tabbar-badge.js'
	export default {
		mixins:[badge],
	    data() {
	        return {
	            indicatorDots: true,
	            autoplay: true,
	            interval: 2000,
	            duration: 500,
				swiperList:[],//轮播图图片数据
				navList:[] ,  //分类导航数据
				floorList:[] //楼层数据
	        }
	    },
		components:{
			mySearch
		},
		onLoad() {
			this.getswiperlist()
			this.getsnavlist()
			this.getfloorlist()
		},
	    methods: {
	    async getswiperlist(){
			const {data:res} = await uni.$http.get('/api/public/v1/home/swiperdata')
			if(res.meta.status!=200){
				uni.$showMsg()
			}else{
				this.swiperList = res.message
			}
		 },
		 async getsnavlist(){
		  	const {data:res} = await uni.$http.get('/api/public/v1/home/catitems')
		  	if(res.meta.status!=200){
		  		uni.$showMsg()
		  	}else{
		  		this.navList = res.message
		  	
		   }
		 },
		 async getfloorlist(){
		  	const {data:res} = await uni.$http.get('/api/public/v1/home/floordata')
		  	if(res.meta.status!=200){
		  		uni.$showMsg()
		  	}else{
				res.message.forEach(floor=>{
					floor.product_list.forEach(prod=>{
						prod.url='/subpkg/goods_liat/goods_liat?'+prod.navigator_url.split('?')[1]
					})
				})
		  		this.floorList = res.message
		   }
		 },
		 gocatepage(name){
			 console.log(name)
			 if(name == "分类")
			 {
				 uni.switchTab({
				 	url:'../cate/cate'
				 })
			 }
		 },
		 // 跳转到搜索页面
		 handlesearch(){
		 	uni.navigateTo({
		 		url:'../../subpkg/search/search'
		 	})	
			}
		}
	}
</script>

<style scoped>
 @import url("./home.css");
</style>
